<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            overflow: hidden;
            font-family: sans-serif;
            font-weight: 100;
            background-color: #212121;
            width: 100%;
            height: 100%;
            text-rendering: optimizeLegibility;
        }

        html .content,
        body .content {
            text-align: center;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

        html .content .random,
        body .content .random {
            color: #eee;
            opacity: 0;
            display: inline-block;
            font-size: 1.5rem;
            text-transform: uppercase;
            font-weight: 100;
            cursor: pointer;
        }

        html .social,
        body .social {
            position: absolute;
            bottom: 30%;
            left: 50%;
            transform: translateX(-50%);
            width: 600px;
            text-align: center;
        }

        html .list-item,
        body .list-item {
            display: inline-block;
            width: 110px;
            text-align: center;
        }

        html .list-item .item-link,
        body .list-item .item-link {
            font-size: 12px;
            text-decoration: none;
            color: #7F7F7F;
            transition: .3s ease-out all;
        }

        html .list-item .item-link:focus,
        body .list-item .item-link:focus {
            outline: none;
        }

        html .list-item .item-link:after,
        body .list-item .item-link:after {
            content: "";
            position: relative;
            width: 0;
            height: 1px;
            display: block;
            z-index: 100;
            background-color: cyan;
            transition: .3s ease-out all;
            left: 50%;
            top: 5px;
            transform: translateX(-50%);
        }

        html .list-item .item-link:hover,
        body .list-item .item-link:hover {
            color: #eee;
        }

        html .list-item .item-link:hover:after,
        body .list-item .item-link:hover:after {
            width: 50px;
        }

        .randomCharacter {
            display: inline-block;
            height: 10px;
        }
    </style>
</head>

<body>
    @charset "UTF-8";
    body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    }

    .scene {
    display: -webkit-box;
    display: flex;
    }

    /** Wizard CSS & Animations */
    .wizard {
    position: relative;
    width: 190px;
    height: 240px;
    }

    .body {
    position: absolute;
    bottom: 0;
    left: 68px;
    height: 100px;
    width: 60px;
    background: #3f64ce;
    }
    .body::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    height: 100px;
    width: 60px;
    background: #3f64ce;
    -webkit-transform: skewX(14deg);
    transform: skewX(14deg);
    }

    .right-arm {
    position: absolute;
    bottom: 74px;
    left: 110px;
    height: 44px;
    width: 90px;
    background: #3f64ce;
    border-radius: 22px;
    /** animation */
    -webkit-transform-origin: 16px 22px;
    transform-origin: 16px 22px;
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
    -webkit-animation: right_arm 10s ease-in-out infinite;
    animation: right_arm 10s ease-in-out infinite;
    }
    .right-arm .right-hand {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1c5b4;
    /** animation */
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    -webkit-animation: right_hand 10s ease-in-out infinite;
    animation: right_hand 10s ease-in-out infinite;
    }
    .right-arm .right-hand::after {
    content: "";
    position: absolute;
    right: 0px;
    top: -8px;
    width: 15px;
    height: 30px;
    border-radius: 10px;
    background: #f1c5b4;
    /** Animation */
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    -webkit-animation: right_finger 10s ease-in-out infinite;
    animation: right_finger 10s ease-in-out infinite;
    }

    .left-arm {
    position: absolute;
    bottom: 74px;
    left: 26px;
    height: 44px;
    width: 70px;
    background: #3f64ce;
    border-bottom-left-radius: 8px;
    /** animation */
    -webkit-transform-origin: 60px 26px;
    transform-origin: 60px 26px;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    -webkit-animation: left_arm 10s ease-in-out infinite;
    animation: left_arm 10s ease-in-out infinite;
    }
    .left-arm .left-hand {
    position: absolute;
    left: -18px;
    top: 0;
    width: 18px;
    height: 30px;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    background: #f1c5b4;
    }
    .left-arm .left-hand::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 15px;
    border-radius: 20px;
    background: #f1c5b4;
    /** Animation */
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: left_finger 10s ease-in-out infinite;
    animation: left_finger 10s ease-in-out infinite;
    }

    .head {
    position: absolute;
    top: 0;
    left: 14px;
    width: 160px;
    height: 210px;
    /** Animation */
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-animation: head 10s ease-in-out infinite;
    animation: head 10s ease-in-out infinite;
    }
    .head .beard {
    position: absolute;
    bottom: 0;
    left: 38px;
    height: 106px;
    width: 80px;
    border-bottom-right-radius: 55%;
    background: #ffffff;
    }
    .head .beard::after {
    content: "";
    position: absolute;
    top: 16px;
    left: -10px;
    width: 40px;
    height: 20px;
    border-radius: 20px;
    background: #ffffff;
    }
    .head .face {
    position: absolute;
    bottom: 76px;
    left: 38px;
    height: 30px;
    width: 60px;
    background: #f1c5b4;
    }
    .head .face::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 40px;
    width: 20px;
    height: 40px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #f1c5b4;
    }
    .head .face::after {
    content: "";
    position: absolute;
    top: 16px;
    left: -10px;
    width: 50px;
    height: 20px;
    border-radius: 20px;
    border-bottom-right-radius: 0px;
    background: #ffffff;
    }
    .head .face .adds {
    /** Nose */
    position: absolute;
    top: 0px;
    left: -10px;
    width: 40px;
    height: 20px;
    border-radius: 20px;
    background: #f1c5b4;
    }
    .head .face .adds::after {
    /** Ear */
    content: "";
    position: absolute;
    top: 5px;
    left: 80px;
    width: 15px;
    height: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    background: #f1c5b4;
    }
    .head .hat {
    position: absolute;
    bottom: 106px;
    left: 0;
    width: 160px;
    height: 20px;
    border-radius: 20px;
    background: #3f64ce;
    }
    .head .hat::before {
    content: "";
    position: absolute;
    top: -70px;
    left: 50%;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 34px 70px 50px;
    border-color: transparent transparent #3f64ce transparent;
    }
    .head .hat::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 20px;
    background: #3f64ce;
    border-radius: 20px;
    }
    .head .hat .hat-of-the-hat {
    position: absolute;
    bottom: 78px;
    left: 79px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 19px;
    border-color: transparent transparent #3f64ce transparent;
    }
    .head .hat .hat-of-the-hat::after {
    content: "";
    position: absolute;
    top: 6px;
    left: -4px;
    width: 35px;
    height: 10px;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    background: #3f64ce;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    }
    .head .hat .four-point-star {
    position: absolute;
    width: 12px;
    height: 12px;
    }
    .head .hat .four-point-star::after, .head .hat .four-point-star::before {
    content: "";
    position: absolute;
    background: #ffffff;
    display: block;
    left: 0;
    width: 141.4213%;
    /* 100% * √2 */
    top: 0;
    bottom: 0;
    border-radius: 10%;
    -webkit-transform: rotate(66.66deg) skewX(45deg);
    transform: rotate(66.66deg) skewX(45deg);
    }
    .head .hat .four-point-star::after {
    -webkit-transform: rotate(156.66deg) skew(45deg);
    transform: rotate(156.66deg) skew(45deg);
    }
    .head .hat .four-point-star.--first {
    bottom: 28px;
    left: 46px;
    }
    .head .hat .four-point-star.--second {
    bottom: 40px;
    left: 80px;
    }
    .head .hat .four-point-star.--third {
    bottom: 15px;
    left: 108px;
    }

    /** 10s animation - 10% = 1s */
    @-webkit-keyframes right_arm {
    0% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
    }
    10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
    }
    15% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    }
    20% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    }
    25% {
    -webkit-transform: rotate(26deg);
    transform: rotate(26deg);
    }
    30% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    }
    35% {
    -webkit-transform: rotate(28deg);
    transform: rotate(28deg);
    }
    40% {
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);
    }
    45% {
    -webkit-transform: rotate(28deg);
    transform: rotate(28deg);
    }
    50% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
    }
    58% {
    -webkit-transform: rotate(74deg);
    transform: rotate(74deg);
    }
    62% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
    }
    }
    @keyframes right_arm {
    0% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
    }
    10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
    }
    15% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    }
    20% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    }
    25% {
    -webkit-transform: rotate(26deg);
    transform: rotate(26deg);
    }
    30% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    }
    35% {
    -webkit-transform: rotate(28deg);
    transform: rotate(28deg);
    }
    40% {
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);
    }
    45% {
    -webkit-transform: rotate(28deg);
    transform: rotate(28deg);
    }
    50% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
    }
    58% {
    -webkit-transform: rotate(74deg);
    transform: rotate(74deg);
    }
    62% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
    }
    }
    @-webkit-keyframes left_arm {
    0% {
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    }
    10% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
    }
    15% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    }
    20% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }
    25% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    }
    30% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }
    35% {
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
    }
    40% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }
    45% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    }
    50% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
    }
    58% {
    -webkit-transform: rotate(-74deg);
    transform: rotate(-74deg);
    }
    62% {
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    }
    }
    @keyframes left_arm {
    0% {
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    }
    10% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
    }
    15% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    }
    20% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }
    25% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    }
    30% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }
    35% {
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
    }
    40% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }
    45% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    }
    50% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
    }
    58% {
    -webkit-transform: rotate(-74deg);
    transform: rotate(-74deg);
    }
    62% {
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    }
    }
    @-webkit-keyframes right_hand {
    0% {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    }
    10% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    }
    15% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    }
    20% {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    }
    25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    30% {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    }
    35% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    40% {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    }
    45% {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    }
    50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    }
    60% {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    }
    }
    @keyframes right_hand {
    0% {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    }
    10% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    }
    15% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    }
    20% {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    }
    25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    30% {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    }
    35% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    40% {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    }
    45% {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    }
    50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    }
    60% {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    }
    }
    @-webkit-keyframes right_finger {
    0% {
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    }
    10% {
    -webkit-transform: none;
    transform: none;
    }
    50% {
    -webkit-transform: none;
    transform: none;
    }
    60% {
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    }
    }
    @keyframes right_finger {
    0% {
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    }
    10% {
    -webkit-transform: none;
    transform: none;
    }
    50% {
    -webkit-transform: none;
    transform: none;
    }
    60% {
    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    }
    }
    @-webkit-keyframes left_finger {
    0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    }
    10% {
    -webkit-transform: scaleX(1) rotate(6deg);
    transform: scaleX(1) rotate(6deg);
    }
    15% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    20% {
    -webkit-transform: scaleX(1) rotate(8deg);
    transform: scaleX(1) rotate(8deg);
    }
    25% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    30% {
    -webkit-transform: scaleX(1) rotate(7deg);
    transform: scaleX(1) rotate(7deg);
    }
    35% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    40% {
    -webkit-transform: scaleX(1) rotate(5deg);
    transform: scaleX(1) rotate(5deg);
    }
    45% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    50% {
    -webkit-transform: scaleX(1) rotate(6deg);
    transform: scaleX(1) rotate(6deg);
    }
    58% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    }
    }
    @keyframes left_finger {
    0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    }
    10% {
    -webkit-transform: scaleX(1) rotate(6deg);
    transform: scaleX(1) rotate(6deg);
    }
    15% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    20% {
    -webkit-transform: scaleX(1) rotate(8deg);
    transform: scaleX(1) rotate(8deg);
    }
    25% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    30% {
    -webkit-transform: scaleX(1) rotate(7deg);
    transform: scaleX(1) rotate(7deg);
    }
    35% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    40% {
    -webkit-transform: scaleX(1) rotate(5deg);
    transform: scaleX(1) rotate(5deg);
    }
    45% {
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    }
    50% {
    -webkit-transform: scaleX(1) rotate(6deg);
    transform: scaleX(1) rotate(6deg);
    }
    58% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    }
    }
    @-webkit-keyframes head {
    0% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    }
    10% {
    -webkit-transform: translatex(10px) rotate(7deg);
    transform: translatex(10px) rotate(7deg);
    }
    50% {
    -webkit-transform: translatex(0px) rotate(0deg);
    transform: translatex(0px) rotate(0deg);
    }
    56% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    }
    }
    @keyframes head {
    0% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    }
    10% {
    -webkit-transform: translatex(10px) rotate(7deg);
    transform: translatex(10px) rotate(7deg);
    }
    50% {
    -webkit-transform: translatex(0px) rotate(0deg);
    transform: translatex(0px) rotate(0deg);
    }
    56% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    }
    }
    /** Objects CSS & Animations */
    .objects {
    position: relative;
    width: 200px;
    height: 240px;
    }

    .square {
    position: absolute;
    bottom: -60px;
    left: -5px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /** Animation */
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-animation: path_square 10s ease-in-out infinite;
    animation: path_square 10s ease-in-out infinite;
    }
    .square::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 50px;
    height: 50px;
    background: #9ab3f5;
    }

    .circle {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /** Animation */
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-animation: path_circle 10s ease-in-out infinite;
    animation: path_circle 10s ease-in-out infinite;
    }
    .circle::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #c56183;
    }

    .triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    /** Animation */
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-animation: path_triangle 10s ease-in-out infinite;
    animation: path_triangle 10s ease-in-out infinite;
    }
    .triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
    }

    /** 10s animation - 10% = 1s */
    @-webkit-keyframes path_circle {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-100px) rotate(-5deg);
    transform: translateY(-100px) rotate(-5deg);
    }
    55% {
    -webkit-transform: translateY(-100px) rotate(-360deg);
    transform: translateY(-100px) rotate(-360deg);
    }
    58% {
    -webkit-transform: translateY(-100px) rotate(-360deg);
    transform: translateY(-100px) rotate(-360deg);
    }
    63% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
    }
    @keyframes path_circle {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-100px) rotate(-5deg);
    transform: translateY(-100px) rotate(-5deg);
    }
    55% {
    -webkit-transform: translateY(-100px) rotate(-360deg);
    transform: translateY(-100px) rotate(-360deg);
    }
    58% {
    -webkit-transform: translateY(-100px) rotate(-360deg);
    transform: translateY(-100px) rotate(-360deg);
    }
    63% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
    }
    @-webkit-keyframes path_square {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-155px) translatex(-15px) rotate(10deg);
    transform: translateY(-155px) translatex(-15px) rotate(10deg);
    }
    55% {
    -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    }
    57% {
    -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    }
    63% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
    }
    @keyframes path_square {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-155px) translatex(-15px) rotate(10deg);
    transform: translateY(-155px) translatex(-15px) rotate(10deg);
    }
    55% {
    -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    }
    57% {
    -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    transform: translateY(-155px) translatex(-15px) rotate(-350deg);
    }
    63% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
    }
    @-webkit-keyframes path_triangle {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-172px) translatex(10px) rotate(-10deg);
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
    }
    55% {
    -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
    }
    58% {
    -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
    }
    63% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
    }
    @keyframes path_triangle {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-172px) translatex(10px) rotate(-10deg);
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
    }
    55% {
    -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
    }
    58% {
    -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
    }
    63% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
    }
    .progress {
    position: relative;
    margin-top: 60px;
    width: 400px;
    height: 20px;
    background: #eee;
    }
    .progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #637373;
    -webkit-animation: progress 20s linear infinite;
    animation: progress 20s linear infinite;
    }

    @-webkit-keyframes progress {
    from {
    width: 0;
    }
    to {
    width: 100%;
    }
    }

    @keyframes progress {
    from {
    width: 0;
    }
    to {
    width: 100%;
    }
    }
    .noise {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-image:
    url();
    }

    <script>
        'use strict'


        var RandomCharacterAnimation = function (options) {

            /**
             * @default value for each parameters
             *
             */

            var defaults = {
                d_element: '',
                d_type: 'char',
                d_min: 10,
                d_max: 100,
                d_kerning: 10,
            }

            this.size;
            this.getLettersArray = [];
            this.getLettersChanges = [];
            this.kerningSize = [];
            this.currentChange = 0;
            this.char = 'abcdefghijklmnopqrstuvwxyz0123456789!?*()@￡$%^&_-+=[]{}:;\'"\\|<>,./~`×';
            this.charArray = [];
            this.requestId;


            // Create options by extending defaults with the passed in arguments
            if (arguments[0] && typeof arguments[0] === "object") {
                this.options = _extendDefaults(defaults, arguments[0]);
            }

        }

        /**
          * @function _extendDefaults
          * @description set defaults parameters if undefined
          * @param source 		| get defaults parameters
          * @param properties | choose & set the defaults
          * @private
          *
          */

        function _extendDefaults(source, properties) {
            var property;
            for (property in properties) {
                if (properties.hasOwnProperty(property)) {
                    source[property] = properties[property];
                }
            }
            return source;
        }


        RandomCharacterAnimation.prototype = {

            // Private functions

            /**
             * @function _random
             * @description generate a random number
             * @param minNb & maxNb 	| allows to generate the number between 20 and 50 for example
             * @private
             *
             */

            _random: function (minNb, maxNb) {
                return Math.floor(Math.random() * (maxNb - minNb) + minNb);
            },

            /**
             * @function _getElementSize
             * @description get the length of the DOM element and push in an array
             * @param minNb & maxNb 	| allows to generate the number between 20 and 50 for example
             * @private
             *
             */

            _getElementSize: function () {
                var i, thisLetter;
                var element_selected = document.querySelector(this.options.d_element).textContent;

                for (i in element_selected) {
                    thisLetter = element_selected[i];
                    this.getLettersArray.push(thisLetter);
                }
                return this.getLettersArray;

            },

            /**
             * @function _setStructure
             * @description display a span for every letter that will allow the animation
             * @private
             *
             */

            _setStructure: function () {
                var element = document.querySelector(this.options.d_element);
                element.innerHTML = '';

                var i, j, characterContainer, thisContainer, array, kerningSize;

                for (i in this.getLettersArray) {
                    characterContainer = document.createElement('span');
                    array = this.getLettersArray[i];

                    // display a whitespace
                    if (array === ' ') {
                        characterContainer.innerHTML = ' ';
                    }

                    characterContainer.classList.add('randomCharacter');
                    element.appendChild(characterContainer);

                    var letter = document.createTextNode(array);

                    // ? one mooore hack ?
                    characterContainer.appendChild(letter);
                    characterContainer.style.opacity = '0';
                }

            },

            /**
             * @function _setKerning
             * @description adapt the letter spacing
             * @description very useful if you're not using a monospace font
             * @description don't try to delete this function
             * @description except if you want new eyes
             * @private
             *
             */

            _setKerning: function () {

                var kerning = this.options.d_kerning;
                var elem = document.querySelector(this.options.d_element);

                var i, j, thisContainer, array, kerningSize;

                for (i = 0; i < this.getLettersArray.length; i++) {
                    j = i + 1; //hack
                    thisContainer = elem.querySelector('.randomCharacter:nth-child(' + j + ')');
                    thisContainer.style.padding = '0' + (Math.sqrt(kerning) / thisContainer.offsetWidth) + 'px';
                    kerningSize = thisContainer.offsetWidth;
                    this.kerningSize.push(kerningSize);
                    thisContainer.style.width = kerningSize + 'px';
                }
            },

            /**
             * @function _convertStringToArray
             * @description transform every string to an array
             * @description useful if you want to use your own character to generate the animation
             * @param charType 	| type of character
             * @private
             *
             */

            _convertStringToArray: function (charType) {
                var i, thisChar;
                for (i = 0; i < this.char.length; i++) {
                    thisChar = this.char[i];
                    this.charArray.push(thisChar);
                }
            },

            /**
             * @function _setChange
             * @description set when each letter will change until the end of the animation
             * @private
             *
             */

            _setChange: function () {
                var i, setChange;

                for (i in this.getLettersArray) {
                    setChange = this._random(this.options.d_min, this.options.d_max);
                    this.getLettersChanges.push(setChange);
                }
            },

            /**
             * @function _generateRandomCharacter
             * @description the core of the animation
             * @description generate a new character randomly
             * @descritpion everytime the function is called
             * @param charType 	| type of character
             * @private
             *
             */

            _generateRandomCharacter: function () {

                var charType = this.options.d_type;
                var elem = document.querySelector(this.options.d_element);

                this.currentChange++;

                var chooseRandomLetter = this._random(0, this.getLettersArray.length);
                var generateContent, setContent, getChar;
                var changesPlaces = elem.querySelector('.randomCharacter:nth-child(' + (chooseRandomLetter + 1) + ')');

                if (charType === 'int') {
                    generateContent = this._random(0, 9);
                } else if (charType === 'char') {
                    getChar = this._random(0, this.charArray.length);
                    generateContent = this.charArray[getChar];
                } else {
                    getChar = this._random(0, charType.length);
                    generateContent = charType[getChar];
                }

                changesPlaces.innerHTML = generateContent;
                changesPlaces.style.opacity = '1';
                elem.style.opacity = '1'

            },

            /**
             * @function _checkNbChanges
             * @description check the current number of changes
             * @descritpion everytime the function is called
             * @description and display the original letter asap.
             * @private
             *
             */

            _checkNbChanges: function () {
                var i, j, k, thisChar, setContent, thisContainer;
                var elem = document.querySelector(this.options.d_element);

                for (i = 0; i < this.getLettersArray.length; i++) {
                    j = i + 1; //hack
                    thisChar = this.getLettersChanges[i];
                    thisContainer = elem.querySelector('.randomCharacter:nth-child(' + j + ')');
                    setContent = this.getLettersArray[i];

                    if (this.currentChange > thisChar) {
                        thisContainer.innerHTML = setContent;
                    }
                }
            },

            /**
             * @function _loop
             * @description requestAnimationFrame
             * @private
             *
             */

            _loop: function () {

                var self = this;

                this.requestId = requestAnimationFrame(function () {
                    self._loop();

                    if (self.currentChange > self.options.d_max) {
                        self.stop();
                    }

                });

                self._generateRandomCharacter(self.options.d_type);
                self._checkNbChanges();

            },

            // Public functions

            /**
             * @function restart
             * @description allows to restart the animation.
             * @description useful for hover or else
             * @param key 	| allows a key to restart the animation
             * @default 		| false
             * @public
             *
             */

            restart: function () {
                this.currentChange = 0;
                this._setChange();
                this._loop();
            },

            /**
             * @function start
             * @description trigger the animation
             * @public
             *
             */

            start: function () {

                this._getElementSize();
                this._setStructure();
                this._setKerning();
                this._setChange();
                this._convertStringToArray();

                this._loop();

            },

            /**
             * @function stop
             * @description stop the requestAnimaionFrame #notEnoughObvious ? ?
             * @public
             *
             */

            stop: function () {
                window.cancelAnimationFrame(this.requestId);
            }

        };


        // Single Usage - If you define the animation only for one element
        var title = new RandomCharacterAnimation({
            d_element: '.random',
            d_kerning: 8000,
        });

        title.start();

        /**
         * @example
         * @description usage of the plugin with a list of element in the same level
         *
         */

        // Multiple Usage - For example for list
        var animations = [
            {
                d_element: '.item-link1',
                d_min: 25,
                d_max: 50,
            },
            {
                d_element: '.item-link2',
                d_min: 25,
                d_max: 50,
            },
            {
                d_element: '.item-link3',
                d_min: 25,
                d_max: 50,
            },
            {
                d_element: '.item-link4',
                d_min: 25,
                d_max: 50,
            },
            {
                d_element: '.item-link5',
                d_min: 25,
                d_max: 50,
            }
        ]

        var obj = [];

        for (var optionsAnim in animations) {
            var random = new RandomCharacterAnimation(animations[optionsAnim]);
            random.start();
            obj.push(random);
        }

        /**
         * @function getIndexOfElementInParent
         * @param element 	| selected node element. best use is like is event.target.parentNode
         * because if you this function it means that most probably there are others same
         * element in the same level
         * @description this function get the index of the selected element
         * @public
         *
         */

        function getIndexOfElementInParent(element) {
            var parent = element.parentNode;
            for (var index = 0; index <= parent.children.length - 1; index++) {
                if (parent.children[index] === element) {
                    return index;
                }
            }
        };

        /**
         * @function newEvent
         * @param selected_element_class 	| this is too obvious, and it's a string.
         * @param _event 					| event, for example 'mouseenter'
         * @description this function is just an example. Feel free to
         * create your own function
         * @public
         *
         */

        function newEvent(selected_element_class, _event) {
            var items = document.querySelectorAll(selected_element_class);
            for (var i = 0; i <= items.length - 1; i++) {
                items.item(i).addEventListener(_event, function (event) {
                    // call getIndexOfElementInParent
                    var currentItemIndex = getIndexOfElementInParent(event.target.parentNode)
                    obj[currentItemIndex].restart();
                }, false);
            }
        };

        newEvent('.item-link', 'mouseenter');

    </script>
</body>

</html>